/*
 * @Descripttion: .
 * @Version: .
 * @Author: JM
 * @Date: 2023-03-01 11:43:31
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-03-03 21:32:27
 */

import React, { useEffect, useState } from "react";
import { getCategoryList } from "@/api/category";
import Style from "./CategoryList.module.scss";
import { Card, NavBar, Space } from "antd-mobile";
import { useNavigate, useParams } from "react-router-dom";
import { useDispatch } from "react-redux";
import { SearchOutline, ReceivePaymentOutline } from "antd-mobile-icons";
import { hideTabbar } from "@/store/slices/commonSlice";

const CategrowListview = () => {
  // 关闭底部tabbar
  var dispatch = useDispatch();

  // 获取路由导航函数
  var navigate = useNavigate();

  //拿到传过来的id
  const { id } = useParams();
  console.log(id);

  const categoryId = Number(id?.slice(0, 7));
  console.log(categoryId);
  const subCategoryId = Number(id?.slice(7, 14));

  console.log(subCategoryId);

  //获取分类标题
  const [listtitle, setListtitle] = useState([]);

  //列表数据
  const [list, setList] = useState([]);

  const [listmain, setListmain] = useState([]);

  //  发送请求,请求数据
  useEffect(() => {
    // 关闭底部按钮tabbar
    // dispatch(hideTabbar());

    getCategoryList(categoryId, subCategoryId).then((res) => {
      console.log(res);
      console.log(res.data.data.categoryItems.itemList);
      setListtitle(res.data.data.categoryItems.category.frontName);
      setList(res.data.data.categoryItems.itemList);
      setListmain(res.data.data.categoryItems.itemList.finalPriceInfoVO);
    });
  }, []);

  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <SearchOutline />
        <ReceivePaymentOutline />
      </Space>
    </div>
  );
  //返回主页
  const back = () => {
    navigate("/home/recommend");
  };

  return (
    <div className={Style.wrapper}>
      <NavBar className={Style.header} right={right} onBack={back}>
        网易严选
      </NavBar>
      <div className={Style.bodyer}>
        <Card
          style={{ width: "100%", display: "flex", justifyContent: "center" }}
          title={listtitle}
        />
        {list.map((val: any,key) => (
          <div className={Style.listdiv} key={key}>
            <img
              className={Style.listimg}
              src={val.listPicUrl}
              id={val.id}
              onClick={(e) => {
                console.log(e);
                navigate("/detail/" + val.id);
              }}
            />
            <div className={Style.big}>
              <p className={Style.name}>{val.name}</p>
              <span className={Style.price1}>
                ￥{val.retailPrice}
                <span className={Style.price2}>￥{val.sortOriginPrice}</span>
              </span>
              <div className={Style.title}>
                {val.finalPriceInfoVO.banner?.title}
                {val.finalPriceInfoVO.banner?.content}
                {val.finalPriceInfoVO.banner?.logo}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
export default CategrowListview;
